<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 金铲铲之战运营教学</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#E6B325', // 金色
              secondary: '#5D4037', // 棕色
              accent: '#FF5722', // 橙色
              dark: '#1A1A1A',
              light: '#F5F5F5'
            },
            fontFamily: {
              sans: ['Inter', 'system-ui', 'sans-serif'],
            },
          },
        }
      }
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .bg-glass {
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(8px);
        }
        .hover-scale {
          transition: transform 0.3s ease;
        }
        .hover-scale:hover {
          transform: scale(1.05);
        }
        .form-input-focus {
          @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all duration-300;
        }
        .btn-primary {
          @apply bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5;
        }
        .btn-outline {
          @apply border border-gray-300 hover:border-primary hover:text-primary font-medium py-2 px-4 rounded-lg transition-all duration-300;
        }
      }
    </style>
  </head>
  <body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <!-- 背景装饰元素 -->
    <div class="absolute inset-0 overflow-hidden -z-10">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>
    </div>
    
    <div class="w-full max-w-md">
  
      
      <div class="bg-white rounded-2xl shadow-xl p-8 relative overflow-hidden">
        <!-- 装饰性角落元素 -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full -z-10"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-primary/5 rounded-tr-full -z-10"></div>
        
        <!-- 品牌标志 -->
        <div class="text-center mb-8">
          <div class="inline-flex items-center justify-center w-20 h-20 rounded-xl mb-4">
            <img src="img/1.png" alt="金铲铲之战" class="w-16 h-16 object-contain">
          </div>
          <h1 class="text-2xl font-bold text-dark">金铲铲之战运营教学</h1>
          <p class="text-gray-500 mt-2">登录您的账号，获取专业攻略</p>
        </div>
        
        <!-- 登录表单 -->
        <form id="login-form" class="space-y-6">
          <!-- 用户名/邮箱 -->
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-user text-gray-400"></i>
              </div>
              <input type="text" id="username" name="username" 
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请输入邮箱" required>
              <div id="username-error" class="hidden text-red-500 text-sm mt-1">邮箱格式不正确，请输入包含@.com的有效邮箱地址</div>
            </div>
          </div>
          
          <!-- 密码 -->
          <div>
            <div class="flex items-center justify-between mb-1">
              <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
              <a href="#" id="forgot-password-link" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码？</a>
            </div>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="password" name="password" 
                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请输入密码" required>
              <button type="button" id="toggle-password" 
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
          </div>
          
          <!-- 记住我 -->
          <div class="flex items-center">
            <input type="checkbox" id="remember-me" name="remember-me" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
          </div>
          
          <!-- 登录按钮 -->
          <div>
            <button type="submit" class="w-full btn-primary">
              <i class="fa fa-sign-in mr-2"></i> 登录
            </button>
          </div>
        </form>
        
        <!-- 分隔线 -->
        <div class="relative my-6">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-200"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500">或者使用以下方式登录</span>
          </div>
        </div>
        
        <!-- 社交媒体登录 -->
        <div class="grid grid-cols-3 gap-3">
          <button type="button" class="btn-outline flex justify-center items-center py-2">
            <i class="fa fa-weixin text-[#07C160]"></i>
          </button>
          <button type="button" class="btn-outline flex justify-center items-center py-2">
            <i class="fa fa-qq text-[#12B7F5]"></i>
          </button>
          <button type="button" class="btn-outline flex justify-center items-center py-2">
            <i class="fa fa-weibo text-[#E6162D]"></i>
          </button>
        </div>
        
        <!-- 注册提示 -->
        <div class="text-center mt-6">
          <p class="text-sm text-gray-600">
            <span id="register-required" class="font-medium text-accent hidden">必须先注册才能登录</span><br>
            还没有账号？ <a href="#" id="register-link" class="text-primary font-medium hover:text-primary/80 transition-colors">立即注册</a>
          </p>
          <!-- 测试账号信息 -->
          <div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
            <p class="text-xs font-medium text-gray-700 mb-1">测试账号：</p>
            <p class="text-xs text-gray-600">邮箱：test@example.com</p>
            <p class="text-xs text-gray-600">密码：Test123456</p>
          </div>
          <!-- 版权信息 - 移到注册提示下方并居中 -->
          <p class="text-xs text-gray-500 mt-4">
            © 2025 金铲铲之战运营教学 版权所有
          </p>
        </div>
      </div>
    </div>
    
    <!-- 注册模态框 -->
    <div id="register-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 mx-4 transform scale-95 transition-transform duration-300">
        <!-- 模态框标题和关闭按钮 -->
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-bold text-dark">创建新账号</h2>
          <button id="close-modal" class="text-gray-500 hover:text-gray-700 focus:outline-none">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
        
        <!-- 注册表单步骤指示器 -->
        <div class="flex items-center justify-between mb-8">
          <div class="w-1/3 flex flex-col items-center">
            <div id="step1-indicator" class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2">1</div>
            <span class="text-xs text-primary font-medium">基本信息</span>
          </div>
          <div class="w-1/6 flex justify-center">
            <div id="step1-2-line" class="h-1 w-full bg-gray-200"></div>
          </div>
          <div class="w-1/3 flex flex-col items-center">
            <div id="step2-indicator" class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2">2</div>
            <span class="text-xs text-gray-500">验证信息</span>
          </div>
          <div class="w-1/6 flex justify-center">
            <div id="step2-3-line" class="h-1 w-full bg-gray-200"></div>
          </div>
          <div class="w-1/3 flex flex-col items-center">
            <div id="step3-indicator" class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2">3</div>
            <span class="text-xs text-gray-500">完成注册</span>
          </div>
        </div>
        
        <!-- 步骤1：基本信息 -->
        <div id="step1" class="space-y-6">
          <!-- 邮箱 -->
          <div>
            <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱地址</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-envelope text-gray-400"></i>
              </div>
              <input type="email" id="register-email" 
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请输入有效的邮箱地址" required>
              <div id="email-error" class="hidden text-red-500 text-sm mt-1">邮箱格式不正确，请输入包含@.com的有效邮箱地址</div>
            </div>
          </div>
          
          <!-- 密码 -->
          <div>
            <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="register-password" 
                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请设置8-20位密码，包含字母和数字" required>
              <button type="button" id="toggle-register-password" 
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
            <div id="password-error" class="hidden text-red-500 text-sm mt-1">密码必须包含字母和数字，长度8-20位</div>
            <div class="mt-2 text-xs text-gray-500">
              <span id="password-strength" class="font-medium">密码强度：</span>
              <span id="strength-weak" class="text-red-500">弱</span>
              <span id="strength-medium" class="text-yellow-500 hidden">中</span>
              <span id="strength-strong" class="text-green-500 hidden">强</span>
            </div>
          </div>
          
          <!-- 确认密码 -->
          <div>
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="confirm-password" 
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请再次输入密码" required>
            </div>
            <div id="confirm-password-error" class="hidden text-red-500 text-sm mt-1">两次输入的密码不一致</div>
          </div>
        </div>
        
        <!-- 步骤2：验证信息 -->
        <div id="step2" class="space-y-6 hidden">
          <!-- 手机号 -->
          <div>
            <label for="phone-number" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-mobile text-gray-400"></i>
              </div>
              <input type="tel" id="phone-number" 
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请输入手机号码" required>
              <div id="phone-error" class="hidden text-red-500 text-sm mt-1">请输入有效的11位手机号码</div>
            </div>
          </div>
          
          <!-- 验证码 -->
          <div>
            <label for="verification-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
            <div class="flex space-x-3">
              <div class="relative flex-1">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-shield text-gray-400"></i>
                </div>
                <input type="text" id="verification-code" 
                  class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                  placeholder="请输入验证码" required>
              </div>
              <button type="button" id="send-code-btn" class="btn-outline whitespace-nowrap">
                获取验证码
              </button>
            </div>
            <div id="verification-error" class="hidden text-red-500 text-sm mt-1">验证码不正确</div>
          </div>
          
          <!-- 用户协议 -->
          <div class="flex items-start">
            <input type="checkbox" id="agree-terms" name="agree-terms" 
              class="h-4 w-4 mt-1 text-primary focus:ring-primary border-gray-300 rounded">
            <label for="agree-terms" class="ml-2 block text-sm text-gray-600">
              我已阅读并同意 <a href="#" class="text-primary hover:text-primary/80">用户协议</a> 和 
              <a href="#" class="text-primary hover:text-primary/80">隐私政策</a>
            </label>
          </div>
        </div>
        
        <!-- 步骤3：完成注册 -->
        <div id="step3" class="space-y-6 hidden">
          <!-- 自定义用户名 -->
          <div>
            <label for="custom-username" class="block text-sm font-medium text-gray-700 mb-1">自定义用户名</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-user text-gray-400"></i>
              </div>
              <input type="text" id="custom-username" 
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请设置您的用户名" required>
              <div id="username-availability" class="hidden text-sm mt-1"></div>
            </div>
          </div>
          
          <!-- 个性化头像选择 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">选择头像</label>
            <div class="grid grid-cols-4 gap-3">
              <div class="avatar-option cursor-pointer border-2 border-transparent rounded-full hover:border-primary transition-colors" data-avatar="1">
                <i class="fa fa-user text-3xl text-gray-300"></i>
              </div>
              <div class="avatar-option cursor-pointer border-2 border-transparent rounded-full hover:border-primary transition-colors" data-avatar="2">
                <i class="fa fa-paw text-3xl text-gray-300"></i>
              </div>
              <div class="avatar-option cursor-pointer border-2 border-transparent rounded-full hover:border-primary transition-colors" data-avatar="3">
                <i class="fa fa-gamepad text-3xl text-gray-300"></i>
              </div>
              <div class="avatar-option cursor-pointer border-2 border-transparent rounded-full hover:border-primary transition-colors" data-avatar="4">
                <i class="fa fa-star text-3xl text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="mt-8 flex justify-between">
          <button id="prev-step" class="btn-outline hidden">
            <i class="fa fa-arrow-left mr-1"></i> 上一步
          </button>
          <div class="ml-auto">
            <button id="next-step" class="btn-primary">
              下一步 <i class="fa fa-arrow-right ml-1"></i>
            </button>
            <button id="complete-registration" class="btn-primary hidden">
              完成注册 <i class="fa fa-check ml-1"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <script>
      // 初始化测试账号
      function initTestAccount() {
        const registeredUsers = getRegisteredUsers();
        const testAccountExists = registeredUsers.some(user => user.email === 'test@example.com');
        
        if (!testAccountExists) {
          const testAccount = {
            email: 'test@example.com',
            password: 'Test123456',
            username: '测试用户',
            phone: '13800138000',
            avatar: '1',
            createdAt: new Date().toISOString()
          };
          
          registeredUsers.push(testAccount);
          localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
          console.log('测试账号已创建：test@example.com / Test123456');
        }
      }
      
      // 页面加载时初始化测试账号
      document.addEventListener('DOMContentLoaded', function() {
        initTestAccount();
      });
      
      // 密码显示/隐藏切换
      document.getElementById('toggle-password').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const icon = this.querySelector('i');
        
        if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          passwordInput.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
      
      // 邮箱验证 - 必须包含@和.com或其他有效域名后缀
      const usernameInput = document.getElementById('username');
      const usernameError = document.getElementById('username-error');
      
      // 验证邮箱格式的正则表达式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      const phoneRegex = /^1[3-9]\d{9}$/;
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/;
      
      usernameInput.addEventListener('input', function() {
        if (this.value && !emailRegex.test(this.value)) {
          usernameError.classList.remove('hidden');
          this.classList.add('border-red-500');
        } else {
          usernameError.classList.add('hidden');
          this.classList.remove('border-red-500');
        }
      });
      
      // 获取已注册用户列表
      function getRegisteredUsers() {
        const users = localStorage.getItem('registeredUsers');
        return users ? JSON.parse(users) : [];
      }
      
      // 获取注册要求提示元素
      const registerRequiredMsg = document.getElementById('register-required');
      
      // 表单提交处理
      document.getElementById('login-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 验证邮箱格式
        if (!emailRegex.test(usernameInput.value)) {
          usernameError.classList.remove('hidden');
          usernameInput.classList.add('border-red-500');
          return;
        }
        
        // 检查用户是否已注册
        const registeredUsers = getRegisteredUsers();
        const user = registeredUsers.find(u => u.email === usernameInput.value);
        
        if (!user) {
          // 显示必须注册提示
          registerRequiredMsg.classList.remove('hidden');
          // 延迟显示alert以确保用户看到页面上的提示
          setTimeout(() => {
            alert('该账号尚未注册，请先注册！');
          }, 300);
          return;
        }
        
        // 简单的密码验证（实际应用中应该加密存储和验证）
        const passwordInput = document.getElementById('password');
        if (user.password !== passwordInput.value) {
          alert('密码错误，请重新输入！');
          return;
        }
        
        // 登录成功时隐藏注册提示
        registerRequiredMsg.classList.add('hidden');
        
        // 存储用户名到localStorage
        localStorage.setItem('loggedInUser', user.username || user.email);
        
        // 登录成功提示
        alert('登录成功！将跳转到主页。');
        window.location.href = 'jin.html';
      });
      
      // 注册模态框功能
      const registerModal = document.getElementById('register-modal');
      const registerLink = document.getElementById('register-link');
      const closeModal = document.getElementById('close-modal');
      
      // 步骤元素
      const step1 = document.getElementById('step1');
      const step2 = document.getElementById('step2');
      const step3 = document.getElementById('step3');
      const nextStepBtn = document.getElementById('next-step');
      const prevStepBtn = document.getElementById('prev-step');
      const completeRegBtn = document.getElementById('complete-registration');
      
      // 步骤指示器
      const step1Indicator = document.getElementById('step1-indicator');
      const step2Indicator = document.getElementById('step2-indicator');
      const step3Indicator = document.getElementById('step3-indicator');
      const step12Line = document.getElementById('step1-2-line');
      const step23Line = document.getElementById('step2-3-line');
      
      // 表单字段
      const registerEmail = document.getElementById('register-email');
      const registerPassword = document.getElementById('register-password');
      const confirmPassword = document.getElementById('confirm-password');
      const phoneNumber = document.getElementById('phone-number');
      const verificationCode = document.getElementById('verification-code');
      const customUsername = document.getElementById('custom-username');
      const agreeTerms = document.getElementById('agree-terms');
      
      // 错误提示
      const emailError = document.getElementById('email-error');
      const passwordError = document.getElementById('password-error');
      const confirmPasswordError = document.getElementById('confirm-password-error');
      const phoneError = document.getElementById('phone-error');
      const verificationError = document.getElementById('verification-error');
      const usernameAvailability = document.getElementById('username-availability');
      
      // 密码强度指示器
      const strengthWeak = document.getElementById('strength-weak');
      const strengthMedium = document.getElementById('strength-medium');
      const strengthStrong = document.getElementById('strength-strong');
      
      // 当前步骤
      let currentStep = 1;
      // 临时存储注册信息
      let tempUserInfo = {};
      // 生成的验证码
      let generatedCode = '';
      
      // 打开注册模态框
      registerLink.addEventListener('click', function(e) {
        e.preventDefault();
        registerModal.classList.remove('hidden');
        // 添加动画效果
        setTimeout(() => {
          registerModal.classList.add('opacity-100');
          registerModal.querySelector('div').classList.remove('scale-95');
          registerModal.querySelector('div').classList.add('scale-100');
        }, 10);
        // 重置表单
        resetRegistrationForm();
      });
      
      // 关闭注册模态框
      closeModal.addEventListener('click', closeRegistrationModal);
      
      // 注释掉点击模态框外部自动关闭的功能，防止用户误操作
      // registerModal.addEventListener('click', function(e) {
      //   if (e.target === registerModal) {
      //     closeRegistrationModal();
      //   }
      // });
      
      // 关闭模态框函数
      function closeRegistrationModal() {
        registerModal.classList.remove('opacity-100');
        registerModal.querySelector('div').classList.remove('scale-100');
        registerModal.querySelector('div').classList.add('scale-95');
        setTimeout(() => {
          registerModal.classList.add('hidden');
        }, 300);
      }
      
      // 下一步按钮点击事件
      nextStepBtn.addEventListener('click', function() {
        if (currentStep === 1) {
          if (validateStep1()) {
            goToStep(2);
          }
        } else if (currentStep === 2) {
          if (validateStep2()) {
            goToStep(3);
          }
        }
      });
      
      // 上一步按钮点击事件
      prevStepBtn.addEventListener('click', function() {
        if (currentStep === 2) {
          goToStep(1);
        } else if (currentStep === 3) {
          goToStep(2);
        }
      });
      
      // 完成注册按钮点击事件
      completeRegBtn.addEventListener('click', function() {
        if (validateStep3()) {
          // 保存用户信息到localStorage
          const registeredUsers = getRegisteredUsers();
          registeredUsers.push(tempUserInfo);
          localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
          
          // 显示成功提示，使用confirm而不是alert，让用户主动决定是否关闭
          const shouldClose = confirm('注册成功！请登录您的账号。\n点击"确定"关闭注册窗口。');
          
          // 只在用户确认后关闭模态框
          if (shouldClose) {
            closeRegistrationModal();
          }
        }
      });
      
      // 跳转到指定步骤
      function goToStep(step) {
        // 隐藏所有步骤
        step1.classList.add('hidden');
        step2.classList.add('hidden');
        step3.classList.add('hidden');
        
        // 重置指示器样式
        step1Indicator.className = 'w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2';
        step2Indicator.className = 'w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2';
        step3Indicator.className = 'w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2';
        step12Line.className = 'h-1 w-full bg-gray-200';
        step23Line.className = 'h-1 w-full bg-gray-200';
        
        // 更新按钮显示
        prevStepBtn.classList.add('hidden');
        nextStepBtn.classList.remove('hidden');
        completeRegBtn.classList.add('hidden');
        
        // 显示指定步骤
        if (step === 1) {
          step1.classList.remove('hidden');
          step1Indicator.className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
        } else if (step === 2) {
          step2.classList.remove('hidden');
          prevStepBtn.classList.remove('hidden');
          
          // 更新指示器
          step1Indicator.className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
          step2Indicator.className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
          step12Line.className = 'h-1 w-full bg-primary';
        } else if (step === 3) {
          step3.classList.remove('hidden');
          prevStepBtn.classList.remove('hidden');
          nextStepBtn.classList.add('hidden');
          completeRegBtn.classList.remove('hidden');
          
          // 更新指示器
          step1Indicator.className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
          step2Indicator.className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
          step3Indicator.className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
          step12Line.className = 'h-1 w-full bg-primary';
          step23Line.className = 'h-1 w-full bg-primary';
        }
        
        currentStep = step;
      }
      
      // 验证步骤1（基本信息）
      function validateStep1() {
        let isValid = true;
        let firstErrorElement = null;
        
        // 验证邮箱
        if (!registerEmail.value.trim()) {
          emailError.textContent = '请输入邮箱地址';
          emailError.classList.remove('hidden');
          registerEmail.classList.add('border-red-500');
          isValid = false;
          firstErrorElement = firstErrorElement || registerEmail;
        } else if (!emailRegex.test(registerEmail.value)) {
          emailError.textContent = '邮箱格式不正确，请输入包含@.com的有效邮箱地址';
          emailError.classList.remove('hidden');
          registerEmail.classList.add('border-red-500');
          isValid = false;
          firstErrorElement = firstErrorElement || registerEmail;
        } else {
          emailError.classList.add('hidden');
          registerEmail.classList.remove('border-red-500');
          
          // 检查邮箱是否已注册
          const registeredUsers = getRegisteredUsers();
          if (registeredUsers.some(user => user.email === registerEmail.value)) {
            emailError.textContent = '该邮箱已被注册';
            emailError.classList.remove('hidden');
            registerEmail.classList.add('border-red-500');
            isValid = false;
            firstErrorElement = firstErrorElement || registerEmail;
          }
        }
        
        // 验证密码
        if (!registerPassword.value) {
          passwordError.textContent = '请设置密码';
          passwordError.classList.remove('hidden');
          registerPassword.classList.add('border-red-500');
          isValid = false;
          firstErrorElement = firstErrorElement || registerPassword;
        } else if (!passwordRegex.test(registerPassword.value)) {
          passwordError.textContent = '密码必须包含字母和数字，长度8-20位';
          passwordError.classList.remove('hidden');
          registerPassword.classList.add('border-red-500');
          isValid = false;
          firstErrorElement = firstErrorElement || registerPassword;
        } else {
          passwordError.classList.add('hidden');
          registerPassword.classList.remove('border-red-500');
        }
        
        // 验证确认密码
        if (!confirmPassword.value) {
          confirmPasswordError.textContent = '请确认密码';
          confirmPasswordError.classList.remove('hidden');
          confirmPassword.classList.add('border-red-500');
          isValid = false;
          firstErrorElement = firstErrorElement || confirmPassword;
        } else if (registerPassword.value !== confirmPassword.value) {
          confirmPasswordError.textContent = '两次输入的密码不一致';
          confirmPasswordError.classList.remove('hidden');
          confirmPassword.classList.add('border-red-500');
          isValid = false;
          firstErrorElement = firstErrorElement || confirmPassword;
        } else {
          confirmPasswordError.classList.add('hidden');
          confirmPassword.classList.remove('border-red-500');
        }
        
        // 如果有错误，聚焦到第一个错误字段
        if (!isValid && firstErrorElement) {
          firstErrorElement.focus();
        }
        
        // 保存临时信息
        if (isValid) {
          tempUserInfo.email = registerEmail.value;
          tempUserInfo.password = registerPassword.value; // 实际应用中应该加密存储
        }
        
        return isValid;
      }
      
      // 验证步骤2（验证信息）
      function validateStep2() {
        let isValid = true;
        
        // 验证手机号
        if (!phoneRegex.test(phoneNumber.value)) {
          phoneError.classList.remove('hidden');
          phoneNumber.classList.add('border-red-500');
          isValid = false;
        } else {
          phoneError.classList.add('hidden');
          phoneNumber.classList.remove('border-red-500');
        }
        
        // 验证验证码
        if (verificationCode.value !== generatedCode) {
          verificationError.classList.remove('hidden');
          verificationCode.classList.add('border-red-500');
          isValid = false;
        } else {
          verificationError.classList.add('hidden');
          verificationCode.classList.remove('border-red-500');
        }
        
        // 验证用户协议
        if (!agreeTerms.checked) {
          alert('请阅读并同意用户协议和隐私政策');
          isValid = false;
        }
        
        // 保存临时信息
        if (isValid) {
          tempUserInfo.phone = phoneNumber.value;
        }
        
        return isValid;
      }
      
      // 验证步骤3（完成注册）
      function validateStep3() {
        let isValid = true;
        
        // 验证用户名
        if (!customUsername.value.trim() || customUsername.value.length < 2) {
          usernameAvailability.textContent = '用户名至少需要2个字符';
          usernameAvailability.className = 'text-red-500 text-sm mt-1';
          usernameAvailability.classList.remove('hidden');
          customUsername.classList.add('border-red-500');
          isValid = false;
        } else {
          // 检查用户名是否已存在
          const registeredUsers = getRegisteredUsers();
          if (registeredUsers.some(user => user.username === customUsername.value.trim())) {
            usernameAvailability.textContent = '该用户名已被使用';
            usernameAvailability.className = 'text-red-500 text-sm mt-1';
            usernameAvailability.classList.remove('hidden');
            customUsername.classList.add('border-red-500');
            isValid = false;
          } else {
            usernameAvailability.textContent = '用户名可用';
            usernameAvailability.className = 'text-green-500 text-sm mt-1';
            usernameAvailability.classList.remove('hidden');
            customUsername.classList.remove('border-red-500');
          }
        }
        
        // 保存临时信息
        if (isValid) {
          tempUserInfo.username = customUsername.value.trim();
          tempUserInfo.avatar = selectedAvatar || '1';
          tempUserInfo.createdAt = new Date().toISOString();
        }
        
        return isValid;
      }
      
      // 密码强度检测
      registerPassword.addEventListener('input', function() {
        const password = this.value;
        
        if (!password) {
          strengthWeak.classList.remove('hidden');
          strengthMedium.classList.add('hidden');
          strengthStrong.classList.add('hidden');
          return;
        }
        
        let strength = 0;
        
        // 密码长度检查
        if (password.length >= 10) strength++;
        
        // 包含小写字母
        if (/[a-z]/.test(password)) strength++;
        
        // 包含大写字母
        if (/[A-Z]/.test(password)) strength++;
        
        // 包含数字
        if (/\d/.test(password)) strength++;
        
        // 包含特殊字符
        if (/[^A-Za-z0-9]/.test(password)) strength++;
        
        // 更新强度显示
        if (strength <= 2) {
          strengthWeak.classList.remove('hidden');
          strengthMedium.classList.add('hidden');
          strengthStrong.classList.add('hidden');
        } else if (strength <= 3) {
          strengthWeak.classList.add('hidden');
          strengthMedium.classList.remove('hidden');
          strengthStrong.classList.add('hidden');
        } else {
          strengthWeak.classList.add('hidden');
          strengthMedium.classList.add('hidden');
          strengthStrong.classList.remove('hidden');
        }
        
        // 验证密码格式
        if (passwordRegex.test(password)) {
          passwordError.classList.add('hidden');
          this.classList.remove('border-red-500');
        } else if (password) {
          passwordError.classList.remove('hidden');
          this.classList.add('border-red-500');
        }
      });
      
      // 确认密码验证
      confirmPassword.addEventListener('input', function() {
        if (this.value !== registerPassword.value) {
          confirmPasswordError.classList.remove('hidden');
          this.classList.add('border-red-500');
        } else {
          confirmPasswordError.classList.add('hidden');
          this.classList.remove('border-red-500');
        }
      });
      
      // 手机号验证
      phoneNumber.addEventListener('input', function() {
        if (!phoneRegex.test(this.value) && this.value) {
          phoneError.classList.remove('hidden');
          this.classList.add('border-red-500');
        } else {
          phoneError.classList.add('hidden');
          this.classList.remove('border-red-500');
        }
      });
      
      // 用户名验证
      customUsername.addEventListener('input', function() {
        const username = this.value.trim();
        
        if (!username) {
          usernameAvailability.classList.add('hidden');
          return;
        }
        
        if (username.length < 2) {
          usernameAvailability.textContent = '用户名至少需要2个字符';
          usernameAvailability.className = 'text-red-500 text-sm mt-1';
          usernameAvailability.classList.remove('hidden');
          this.classList.add('border-red-500');
        } else {
          // 检查用户名是否已存在
          const registeredUsers = getRegisteredUsers();
          if (registeredUsers.some(user => user.username === username)) {
            usernameAvailability.textContent = '该用户名已被使用';
            usernameAvailability.className = 'text-red-500 text-sm mt-1';
            usernameAvailability.classList.remove('hidden');
            this.classList.add('border-red-500');
          } else {
            usernameAvailability.textContent = '用户名可用';
            usernameAvailability.className = 'text-green-500 text-sm mt-1';
            usernameAvailability.classList.remove('hidden');
            this.classList.remove('border-red-500');
          }
        }
      });
      
      // 发送验证码按钮
      const sendCodeBtn = document.getElementById('send-code-btn');
      let countdown = 0;
      let timer = null;
      
      sendCodeBtn.addEventListener('click', function() {
        if (countdown > 0) return;
        
        if (!phoneRegex.test(phoneNumber.value)) {
          alert('请输入有效的手机号码');
          return;
        }
        
        // 生成6位验证码
        generatedCode = Math.floor(100000 + Math.random() * 900000).toString();
        
        // 模拟发送验证码（实际应用中应该调用短信API）
        alert(`验证码已发送至 ${phoneNumber.value}，验证码为：${generatedCode}`);
        
        // 开始倒计时
        countdown = 60;
        sendCodeBtn.disabled = true;
        sendCodeBtn.textContent = `${countdown}秒后重新发送`;
        
        timer = setInterval(function() {
          countdown--;
          sendCodeBtn.textContent = `${countdown}秒后重新发送`;
          
          if (countdown <= 0) {
            clearInterval(timer);
            sendCodeBtn.disabled = false;
            sendCodeBtn.textContent = '获取验证码';
          }
        }, 1000);
      });
      
      // 头像选择
      const avatarOptions = document.querySelectorAll('.avatar-option');
      let selectedAvatar = '1';
      
      avatarOptions.forEach(option => {
        option.addEventListener('click', function() {
          // 移除其他选项的选中状态
          avatarOptions.forEach(opt => {
            opt.classList.remove('border-primary');
            opt.classList.add('border-transparent');
          });
          
          // 添加当前选项的选中状态
          this.classList.remove('border-transparent');
          this.classList.add('border-primary');
          
          // 保存选中的头像
          selectedAvatar = this.getAttribute('data-avatar');
        });
      });
      
      // 默认选中第一个头像
      if (avatarOptions.length > 0) {
        avatarOptions[0].click();
      }
      
      // 重置表单
      function resetRegistrationForm() {
        // 重置步骤
        currentStep = 1;
        goToStep(1);
        
        // 重置表单字段
        registerEmail.value = '';
        registerPassword.value = '';
        confirmPassword.value = '';
        phoneNumber.value = '';
        verificationCode.value = '';
        customUsername.value = '';
        agreeTerms.checked = false;
        
        // 重置错误提示
        emailError.classList.add('hidden');
        passwordError.classList.add('hidden');
        confirmPasswordError.classList.add('hidden');
        phoneError.classList.add('hidden');
        verificationError.classList.add('hidden');
        usernameAvailability.classList.add('hidden');
        
        // 重置边框样式
        registerEmail.classList.remove('border-red-500');
        registerPassword.classList.remove('border-red-500');
        confirmPassword.classList.remove('border-red-500');
        phoneNumber.classList.remove('border-red-500');
        verificationCode.classList.remove('border-red-500');
        customUsername.classList.remove('border-red-500');
        
        // 重置密码强度显示
        strengthWeak.classList.remove('hidden');
        strengthMedium.classList.add('hidden');
        strengthStrong.classList.add('hidden');
        
        // 重置临时信息
        tempUserInfo = {};
        generatedCode = '';
        
        // 重置倒计时
        if (timer) {
          clearInterval(timer);
        }
        countdown = 0;
        sendCodeBtn.disabled = false;
        sendCodeBtn.textContent = '获取验证码';
        
        // 重置头像选择
        selectedAvatar = '1';
        if (avatarOptions.length > 0) {
          avatarOptions[0].click();
        }
      }
      
      // 注册密码显示/隐藏切换
      document.getElementById('toggle-register-password').addEventListener('click', function() {
        const passwordInput = document.getElementById('register-password');
        const icon = this.querySelector('i');
        
        if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          passwordInput.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
    </script>
    
    <!-- 忘记密码模态框 -->
    <div id="forgot-password-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 mx-4 transform scale-95 transition-transform duration-300">
        <!-- 模态框标题和关闭按钮 -->
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-bold text-dark">重置密码</h2>
          <button id="close-forgot-modal" class="text-gray-500 hover:text-gray-700 focus:outline-none">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
        
        <!-- 步骤指示器 -->
        <div class="flex items-center justify-between mb-8">
          <div class="w-1/2 flex flex-col items-center">
            <div id="reset-step1-indicator" class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2">1</div>
            <span class="text-xs text-primary font-medium">验证身份</span>
          </div>
          <div class="w-1/4 flex justify-center">
            <div id="reset-step1-2-line" class="h-1 w-full bg-gray-200"></div>
          </div>
          <div class="w-1/2 flex flex-col items-center">
            <div id="reset-step2-indicator" class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2">2</div>
            <span class="text-xs text-gray-500">设置新密码</span>
          </div>
        </div>
        
        <!-- 步骤1：验证身份 -->
        <div id="reset-step1" class="space-y-6">
          <!-- 邮箱地址 -->
          <div>
            <label for="reset-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱地址</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-envelope text-gray-400"></i>
              </div>
              <input type="email" id="reset-email" 
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请输入您注册时使用的邮箱地址" required>
              <div id="reset-email-error" class="hidden text-red-500 text-sm mt-1">请输入有效的邮箱地址</div>
            </div>
          </div>
          
          <!-- 验证码 -->
          <div>
            <label for="reset-verification-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
            <div class="flex space-x-3">
              <div class="relative flex-1">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i class="fa fa-shield text-gray-400"></i>
                </div>
                <input type="text" id="reset-verification-code" 
                  class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-input-focus" 
                  placeholder="请输入验证码" required>
              </div>
              <button type="button" id="reset-send-code-btn" class="btn-outline whitespace-nowrap">
                获取验证码
              </button>
            </div>
            <div id="reset-verification-error" class="hidden text-red-500 text-sm mt-1">验证码不正确</div>
          </div>
        </div>
        
        <!-- 步骤2：设置新密码 -->
        <div id="reset-step2" class="space-y-6 hidden">
          <!-- 新密码 -->
          <div>
            <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="new-password" 
                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请设置8-20位新密码，包含字母和数字" required>
              <button type="button" id="toggle-new-password" 
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
            <div id="new-password-error" class="hidden text-red-500 text-sm mt-1">密码必须包含字母和数字，长度8-20位</div>
          </div>
          
          <!-- 确认新密码 -->
          <div>
            <label for="confirm-new-password" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="confirm-new-password" 
                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-input-focus" 
                placeholder="请再次输入新密码" required>
              <button type="button" id="toggle-confirm-password" 
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
            <div id="confirm-new-password-error" class="hidden text-red-500 text-sm mt-1">两次输入的密码不一致</div>
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="mt-8 flex justify-end">
          <button id="reset-next-step" class="btn-primary">
            下一步 <i class="fa fa-arrow-right ml-1"></i>
          </button>
          <button id="reset-prev-step" class="btn-outline mr-3 hidden">
            <i class="fa fa-arrow-left mr-1"></i> 上一步
          </button>
          <button id="complete-reset" class="btn-primary hidden">
            完成重置 <i class="fa fa-check ml-1"></i>
          </button>
        </div>
      </div>
    </div>
    
    <script>
      // 忘记密码功能
      const forgotPasswordModal = document.getElementById('forgot-password-modal');
      const forgotPasswordLink = document.getElementById('forgot-password-link');
      const closeForgotModal = document.getElementById('close-forgot-modal');
      const resetStep1 = document.getElementById('reset-step1');
      const resetStep2 = document.getElementById('reset-step2');
      const resetNextStep = document.getElementById('reset-next-step');
      const resetPrevStep = document.getElementById('reset-prev-step');
      const completeReset = document.getElementById('complete-reset');
      const resetEmail = document.getElementById('reset-email');
      const resetVerificationCode = document.getElementById('reset-verification-code');
      const resetSendCodeBtn = document.getElementById('reset-send-code-btn');
      const newPassword = document.getElementById('new-password');
      const confirmNewPassword = document.getElementById('confirm-new-password');
      const toggleNewPassword = document.getElementById('toggle-new-password');
      const toggleConfirmPassword = document.getElementById('toggle-confirm-password');
      const resetEmailError = document.getElementById('reset-email-error');
      const resetVerificationError = document.getElementById('reset-verification-error');
      const newPasswordError = document.getElementById('new-password-error');
      const confirmNewPasswordError = document.getElementById('confirm-new-password-error');
      
      // 模态框显示/隐藏
      function showForgotModal() {
        forgotPasswordModal.classList.remove('hidden');
        setTimeout(() => {
          forgotPasswordModal.classList.add('opacity-100');
          const modalContent = forgotPasswordModal.querySelector('div');
          modalContent.classList.remove('scale-95');
          modalContent.classList.add('scale-100');
        }, 10);
      }
      
      function hideForgotModal() {
        forgotPasswordModal.classList.remove('opacity-100');
        const modalContent = forgotPasswordModal.querySelector('div');
        modalContent.classList.remove('scale-100');
        modalContent.classList.add('scale-95');
        setTimeout(() => {
          forgotPasswordModal.classList.add('hidden');
          resetForm();
        }, 300);
      }
      
      // 重置表单
      function resetForm() {
        resetEmail.value = '';
        resetVerificationCode.value = '';
        newPassword.value = '';
        confirmNewPassword.value = '';
        resetEmailError.classList.add('hidden');
        resetVerificationError.classList.add('hidden');
        newPasswordError.classList.add('hidden');
        confirmNewPasswordError.classList.add('hidden');
        resetGoToStep(1);
      }
      
      // 切换步骤 - 重命名以避免与注册功能的函数冲突
      function resetGoToStep(step) {
        const resetStep1Indicator = document.getElementById('reset-step1-indicator');
        const resetStep2Indicator = document.getElementById('reset-step2-indicator');
        const resetStep12Line = document.getElementById('reset-step1-2-line');
        
        if (step === 1) {
          resetStep1.classList.remove('hidden');
          resetStep2.classList.add('hidden');
          resetNextStep.classList.remove('hidden');
          resetPrevStep.classList.add('hidden');
          completeReset.classList.add('hidden');
          resetStep1Indicator.classList.remove('bg-gray-200', 'text-gray-500');
          resetStep1Indicator.classList.add('bg-primary', 'text-white');
          resetStep2Indicator.classList.remove('bg-primary', 'text-white');
          resetStep2Indicator.classList.add('bg-gray-200', 'text-gray-500');
          resetStep12Line.classList.remove('bg-primary');
          resetStep12Line.classList.add('bg-gray-200');
        } else {
          resetStep1.classList.add('hidden');
          resetStep2.classList.remove('hidden');
          resetNextStep.classList.add('hidden');
          resetPrevStep.classList.remove('hidden');
          completeReset.classList.remove('hidden');
          resetStep1Indicator.classList.remove('bg-primary', 'text-white');
          resetStep1Indicator.classList.add('bg-primary', 'text-white');
          resetStep2Indicator.classList.remove('bg-gray-200', 'text-gray-500');
          resetStep2Indicator.classList.add('bg-primary', 'text-white');
          resetStep12Line.classList.remove('bg-gray-200');
          resetStep12Line.classList.add('bg-primary');
        }
      }
      
      // 验证邮箱
      function validateEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
      }
      
      // 验证密码
      function validatePassword(password) {
        // 至少包含字母和数字，长度8-20位
        const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,20}$/;
        return passwordRegex.test(password);
      }
      
      // 模拟发送验证码
      let resetTimer = null;
      let resetCountdown = 0;
      let generatedResetCode = '';
      
      function startResetCountdown() {
        resetCountdown = 60;
        resetSendCodeBtn.disabled = true;
        resetSendCodeBtn.textContent = `${resetCountdown}秒后重新获取`;
        
        resetTimer = setInterval(() => {
          resetCountdown--;
          resetSendCodeBtn.textContent = `${resetCountdown}秒后重新获取`;
          
          if (resetCountdown <= 0) {
            clearInterval(resetTimer);
            resetSendCodeBtn.disabled = false;
            resetSendCodeBtn.textContent = '获取验证码';
          }
        }, 1000);
      }
      
      // 生成随机验证码
      function generateResetCode() {
        return Math.floor(100000 + Math.random() * 900000).toString();
      }
      
      // 事件监听器
      forgotPasswordLink.addEventListener('click', function(e) {
        e.preventDefault();
        showForgotModal();
      });
      
      closeForgotModal.addEventListener('click', hideForgotModal);
      
      // 注释掉点击模态框外部自动关闭的功能，防止用户误操作
      // forgotPasswordModal.addEventListener('click', function(e) {
      //   if (e.target === forgotPasswordModal) {
      //     hideForgotModal();
      //   }
      // });
      
      resetSendCodeBtn.addEventListener('click', function() {
        const email = resetEmail.value.trim();
        
        if (!validateEmail(email)) {
          resetEmailError.classList.remove('hidden');
          return;
        }
        
        resetEmailError.classList.add('hidden');
        
        // 模拟发送验证码
        generatedResetCode = generateResetCode();
        console.log('发送到邮箱的验证码:', generatedResetCode);
        alert(`验证码已发送到 ${email}，验证码为: ${generatedResetCode}`);
        
        // 开始倒计时
        startResetCountdown();
      });
      
      // 下一步
      resetNextStep.addEventListener('click', function() {
        const email = resetEmail.value.trim();
        const code = resetVerificationCode.value.trim();
        
        // 验证邮箱
        if (!validateEmail(email)) {
          resetEmailError.classList.remove('hidden');
          return;
        }
        resetEmailError.classList.add('hidden');
        
        // 验证验证码
        if (code !== generatedResetCode) {
          resetVerificationError.classList.remove('hidden');
          return;
        }
        resetVerificationError.classList.add('hidden');
        
        // 模拟验证用户是否存在
        const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
        const userExists = users.some(user => user.email === email);
        
        if (!userExists) {
          alert('该邮箱尚未注册，请先注册账号');
          return;
        }
        
        resetGoToStep(2);
      });
      
      // 上一步
      resetPrevStep.addEventListener('click', function() {
        resetGoToStep(1);
      });
      
      // 完成重置
      completeReset.addEventListener('click', function() {
        const password = newPassword.value;
        const confirmPass = confirmNewPassword.value;
        const email = resetEmail.value.trim();
        
        // 验证密码
        if (!validatePassword(password)) {
          newPasswordError.classList.remove('hidden');
          return;
        }
        newPasswordError.classList.add('hidden');
        
        // 验证确认密码
        if (password !== confirmPass) {
          confirmNewPasswordError.classList.remove('hidden');
          return;
        }
        confirmNewPasswordError.classList.add('hidden');
        
        // 更新用户密码
        const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
        const userIndex = users.findIndex(user => user.email === email);
        
        if (userIndex !== -1) {
          users[userIndex].password = password; // 实际应用中应加密存储
          localStorage.setItem('registeredUsers', JSON.stringify(users));
          alert('密码重置成功！请使用新密码登录');
          hideForgotModal();
        } else {
          alert('未找到该用户信息');
        }
      });
      
      // 密码显示/隐藏切换
      toggleNewPassword.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (newPassword.type === 'password') {
          newPassword.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          newPassword.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
      
      toggleConfirmPassword.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (confirmNewPassword.type === 'password') {
          confirmNewPassword.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          confirmNewPassword.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
    </script>
  </body>
</html>